enyo.kind({
	name: "AssessmentUI_CreateDevice",
	kind: "AssessmentUI_PanelBase",
	devicePageSize: 5,
	devicePageNumber: 1,
	devicePageCount: 1,
	
	caption: "Assessment Device",
	submitLeftCaption: "Next",
	
	countryNameList: [],
	cityNameList: [],
	customerNameList: [],
	customerValueList: [],
	
	components: [
		{classes:"panel-body", components:[
			{classes: "picker", components:[
				{name:"countryPicker", kind:"onyx.Button", ontap:"countryPickerClick", content:"Choose Country", classes: "button"},
				{name:"countryPickerList", kind:"List", touch: true, count:0, classes:"list", style:"height: 0px;", onSetupItem:"countryPickerList_setupRow",ontap:"seletctCountry", components:[
					{name: "countryPickerItem", classes: "item enyo-border-box",style:"height:40px", components: [
						{name: "contryName", style:"text-align:center;", content:""},
					]}
				]}
			]},
			{name:"cityGroup", classes:"picker", components:[
				{name:"cityPicker", kind:"onyx.Button", ontap:"cityPickerClick", content:"Choose City", classes: "button"},
				{name:"cityPickerList", kind:"List", touch: true, count:0, classes:"list", style:"height: 0px;", onSetupItem:"cityPickerList_setupRow",ontap:"seletctCity", components:[
					{name: "cityPickerItem", classes: "item enyo-border-box",style:"height:40px", components: [
						{name: "cityName",style:"text-align:center;", content:""},
					]}
				]}
			]},
			{name:"customerGroup", classes:"picker", components:[
				{name:"customerPicker", kind:"onyx.Button", ontap:"customerPickerClick", content:"Choose Customer", classes: "button"},
				{name:"customerPickerList", kind:"List", touch: true, count:0, classes:"list", style:"height: 0px;", onSetupItem:"customerPickerList_setupRow",ontap:"seletctCustomer", components:[
					{name: "customerPickerItem", classes: "item enyo-border-box",style:"height:40px", components: [
						{name: "customerName",style:"text-align:center;", content:""},
					]}
				]}
			]},
			{name:"deviceGroup", classes:"groupbox", components:[
				{name:"deviceGroupHeader", kind:"onyx.GroupboxHeader", content:"Devices", classes: "group-header"},
				{name: "deviceRepeater", kind: "Repeater", classes:"content", onSetupItem: "DeviceRepeaterSetupRow",components:[
					{name:"info", kind: "hpit.Divider", style:"padding:10px 0px 10px 0px;", collapsable: true, isExpanded: false, 
						checkable: true, onCheckChange:"deviceCheckBoxClicked", components: [
						{name: "deviceNameContent", content : ""}, 
						{name: "collectionTimeContent", content : ""}, 
						{name: "systemNameContent", content : ""}, 
						{name: "systemVersionContent", content : ""}
					]},
					{name: "moreButton", content : "Tap Here to Load More...", 
						style: "margin: 5px 0px 5px 10px; font-weight: bold; font-style: italic;", 
						onclick: "moreButtonClicked", showing: false}, 
				]}
			]}
		]},
	],
	
	create: function() {
		this.inherited(arguments);
		AssessmentUI_Data.current_page = this;
		this.initPanel();
	},
	
	initPanel: function() {
		AssessmentUI_Data.payload_Devices = null;
		//hide the groups
		this.$.cityGroup.setShowing(false);
		this.$.customerGroup.setShowing(false);
		this.$.deviceGroup.setShowing(false);
		//init the list
		this.$.countryPickerList.setStyle("height:0px");
		this.$.cityPickerList.setStyle("height:0px");
		this.$.customerPickerList.setStyle("height:0px");
		this.countryNameList = [];
		this.cityNameList = [];
		this.customerNameList = [];
		this.customerValueList = [];

	},
	
	countryPickerClick: function() {
		this.$.countryPicker.setShowing(false);
		this.resetCountryData();
		//call the service
		var service = new hpit.WebService();
		service.setUrl(AssessmentUI_Config.getServiceUrl_RetrieveCountryCities());
		service.setHeaders(AssessmentUI_Config.getCommonServiceHeader());
		service.call(this, "countryCityServiceGot");
		
		this.$.cityGroup.setShowing(false);
		this.$.customerGroup.setShowing(false);
		this.$.deviceGroup.setShowing(false);
		
		this.resetCityData();
		this.resetCustomerData();
	},
	
	countryCityServiceGot: function(inSender, inResponse) {
		
		if(inResponse.statusCode === 200) {
			var json = enyo.json.parse(inResponse.payload);
			AssessmentUI_Data.payload_CountryCities = json;
			//show country selection
			for (var key in AssessmentUI_Data.payload_CountryCities) {
				this.countryNameList.push(key);
				this.$.countryPickerList.count = this.$.countryPickerList.count + 1;
			}
			this.countryNameList.sort();
			if(this.$.countryPickerList.count <= 5){
				var height = 40 * this.$.countryPickerList.count;
				this.$.countryPickerList.setStyle("height:"+height+"px;");
			}else{
				var height = 40 * 5;
				this.$.countryPickerList.setStyle("height:200px;");
			}
			
			this.$.countryPickerList.refresh();
			this.$.countryPickerList.scrollToStart();
		}
		else {
			AssessmentUI_Data.parentWnd.showMsg("Error response of service (StatusCode: " + inResponse.statusCode + ")");
		}
	},
	
	countryPickerList_setupRow: function(inSender, inEvent) {
		var index = inEvent.index;
		// make some mock data if we have none for this row
		if (!this.countryNameList[index]) {
			this.countryNameList[index]= index;
		}
		var n = this.countryNameList[index];
		
		this.$.contryName.setContent(n);
	},
	
	seletctCountry: function() {
		var selectedCountryIndex;
		var selectedCountryValue;
		for(var i = 0; i < this.$.countryPickerList.count; i++) {
			if(this.$.countryPickerList.isSelected(i)) {
				selectedCountryIndex = i;
			}
		}
		
		AssessmentUI_Data.selected_CountryName = this.countryNameList[selectedCountryIndex];

		//set the showing of every list
		this.$.countryPickerList.setStyle("height:0px;");
		this.$.countryPicker.setShowing(true);
		this.$.countryPicker.setContent(AssessmentUI_Data.selected_CountryName);
		this.$.cityGroup.setShowing(true);
		this.$.cityPicker.setShowing(true);

	},
	
	cityPickerClick: function() {
		//reset city data first
		this.resetCityData();
		
		//then set cityList
		if(AssessmentUI_Data.payload_CountryCities.hasOwnProperty(AssessmentUI_Data.selected_CountryName)) {
			this.cityNameList = AssessmentUI_Data.payload_CountryCities[AssessmentUI_Data.selected_CountryName];
			this.cityNameList.sort();
		}
		this.$.cityPicker.setShowing(false);
		this.cityNameListShow();
		
		this.$.customerGroup.setShowing(false);
		this.$.deviceGroup.setShowing(false);
		
		this.resetCustomerData();
	},
	
	cityNameListShow: function() {
		for (var key in this.cityNameList) {
			this.$.cityPickerList.count = this.$.cityPickerList.count + 1;
		}
		if(this.$.cityPickerList.count <= 5){
			var height = 40 * this.$.cityPickerList.count;
			this.$.cityPickerList.setStyle("height:"+height+"px;");
		}else{
			var height = 40 * 5;
			this.$.cityPickerList.setStyle("height:200px;");
		}
		
		this.$.cityPickerList.refresh();
		this.$.cityPickerList.scrollToStart();
	},
	
	cityPickerList_setupRow: function(inSender, inEvent) {
		var index = inEvent.index;

		if (!this.cityNameList[index]) {
			this.cityNameList[index]= index;
		}
		var n = this.cityNameList[index];
		
		this.$.cityName.setContent(n);
	},
	
	seletctCity: function() {
		var selectedCityIndex;
		var selectedCityValue;
		for(var i = 0; i < this.$.cityPickerList.count; i++) {
			if(this.$.cityPickerList.isSelected(i)) {
				selectedCityIndex = i;
			}
		}
		
		AssessmentUI_Data.selected_CityName = this.cityNameList[selectedCityIndex];
		this.$.cityPickerList.setStyle("height:0px;");
		this.$.cityPicker.setShowing(true);
		this.$.cityPicker.setContent(AssessmentUI_Data.selected_CityName);
		this.$.customerGroup.setShowing(true);
		this.$.customerPicker.setShowing(true);
		
		
		//call the service
		var service = new hpit.WebService();
		service.setUrl(AssessmentUI_Config.getServiceUrl_RetrieveCustomers());
		service.setHeaders(AssessmentUI_Config.getCommonServiceHeader());
		service.setParams({value0: AssessmentUI_Data.selected_CountryName},{value1: AssessmentUI_Data.selected_CityName});
		service.call(this, "customerListServiceGot");
	},
	
	customerListServiceGot: function(inSender, inResponse) {
		//reset Customer Data first
		this.resetCustomerData();
		
		if(inResponse.statusCode === 200) {
			AssessmentUI_Data.payload_Customers = inResponse.payload;
			
			//show customers selection
			for(var i = 0; i < AssessmentUI_Data.payload_Customers.length; i++)
			{
				this.customerNameList.push(AssessmentUI_Data.payload_Customers[i].customerName);
				this.customerValueList.push(AssessmentUI_Data.payload_Customers[i].orgSiteIntKey);
				this.$.customerPickerList.count = this.$.customerPickerList.count + 1;
			}
		}
		else {
			AssessmentUI_Data.parentWnd.showMsg("Error response of service (StatusCode: " + inResponse.statusCode + ")");
		}
	},
	
	customerPickerClick: function() {
		this.$.customerPicker.setShowing(false);
		
		if(this.$.customerPickerList.count <= 5){
			var height = 40 * this.$.customerPickerList.count;
			this.$.customerPickerList.setStyle("height:"+height+"px;");
		}else{
			var height = 40 * 5;
			this.$.customerPickerList.setStyle("height:200px;");
		}
		
		this.$.customerPickerList.refresh();
		this.$.customerPickerList.scrollToStart();
	},
	
	customerPickerList_setupRow: function(inSender, inEvent) {
		var index = inEvent.index;
		// make some mock data if we have none for this row
		if (!this.customerNameList[index]) {
			this.customerNameList[index]= index;
		}
		var n = this.customerNameList[index];
		
		this.$.customerName.setContent(n);
	},
	
	seletctCustomer: function() {
		var selectedCustomerIndex;
		var selectedCustomerValue;
		for(var i = 0; i < this.$.customerPickerList.count; i++) {
			if(this.$.customerPickerList.isSelected(i)) {
				selectedCustomerIndex = i;
			}
		}
		
		AssessmentUI_Data.selected_CustomerOrgSiteKey = this.customerValueList[selectedCustomerIndex];
		this.$.customerPickerList.setStyle("height:0px;");
		this.$.customerPicker.setShowing(true);
		this.$.customerPicker.setContent(this.customerNameList[selectedCustomerIndex]);
		this.$.deviceGroup.setShowing(true);
		
		this.devicePageNumber = 1;

		//call the service
		var service = new hpit.WebService();
		service.setUrl(AssessmentUI_Config.getServiceUrl_RetrieveDevices());
		service.setHeaders(AssessmentUI_Config.getCommonServiceHeader());
		service.setParams({value0: AssessmentUI_Data.selected_CustomerOrgSiteKey},
						  {value1: this.devicePageSize},
						  {value2: this.devicePageNumber});
		service.call(this, "deviceListServiceGot");
		
		this.resetDeciveData();
	},
	
	deviceListServiceGot: function(inSender, inResponse) {
		//reset device data first
		//this.resetDeciveData();
		
		if(inResponse.statusCode === 200) {
			if(AssessmentUI_Data.payload_Devices == null) {
				AssessmentUI_Data.payload_Devices = new Array();
				AssessmentUI_Data.payload_Devices.payloadChecked = new Array();
			}
			
			if(inResponse.payload.deviceList == null) {
				AssessmentUI_Data.parentWnd.showMsg("No item found");
			} else {
				for(var i = 0; i< inResponse.payload.deviceList.length; i++) {
					AssessmentUI_Data.payload_Devices.push(inResponse.payload.deviceList[i]);
					AssessmentUI_Data.payload_Devices.payloadChecked.push(false);
				}
			}
			
			//store the page count
			this.devicePageCount = inResponse.payload.pageCount;
			
			//show device list
			this.$.deviceRepeater.count = AssessmentUI_Data.payload_Devices.length;
			this.$.deviceRepeater.build();
			this.$.deviceGroup.setShowing(true);
		}
		else {
			AssessmentUI_Data.parentWnd.showMsg("Error response of service (StatusCode: " + inResponse.statusCode + ")");
		}
	},
	
	DeviceRepeaterSetupRow: function(inSender, inEvent) {
		if(AssessmentUI_Data.payload_Devices == null) return;	//device list not loaded

		var inIndex = inEvent.index;
		var rowControl = inEvent.item;
		rowControl.$.info.setCaption(AssessmentUI_Data.payload_Devices[inIndex].hostname);
		
		rowControl.$.info.setChecked(AssessmentUI_Data.payload_Devices.payloadChecked[inIndex]);
		
		rowControl.$.deviceNameContent.setContent("[Host Name] "  + AssessmentUI_Data.payload_Devices[inIndex].hostname);
		rowControl.$.systemNameContent.setContent("[System Name] "  + AssessmentUI_Data.payload_Devices[inIndex].systemName);
		rowControl.$.systemVersionContent.setContent("[System Version] "  + AssessmentUI_Data.payload_Devices[inIndex].systemVersion);
		var colTime = new Date(AssessmentUI_Data.payload_Devices[inIndex].collectionTimestamp);
		rowControl.$.collectionTimeContent.setContent("[Collection Time] "  + colTime);

		if (inIndex < AssessmentUI_Data.payload_Devices.length - 1) {
			
			rowControl.$.info.setShowing(true);
			rowControl.$.moreButton.setShowing(false);
			this.$.deviceRepeater.render();
		
			return true;
		}
		else if(inIndex == (AssessmentUI_Data.payload_Devices.length - 1) && this.devicePageNumber < this.devicePageCount && inIndex != 0) {
			var rowControl = inEvent.item;
			rowControl.$.moreButton.setShowing(true);
			rowControl.$.info.setShowing(false);
			this.$.deviceRepeater.render();
			return true;
		}
	},
	
	moreButtonClicked: function() {
	
		this.devicePageNumber ++;
		
		var service = new hpit.WebService();
		service.setUrl(AssessmentUI_Config.getServiceUrl_RetrieveDevices());
		service.setHeaders(AssessmentUI_Config.getCommonServiceHeader());
		service.setParams({value0: AssessmentUI_Data.selected_CustomerOrgSiteKey},
						  {value1: this.devicePageSize},
						  {value2: this.devicePageNumber});
		service.call(this, "deviceListServiceGot");
	},
	
	deviceCheckBoxClicked: function(inSender, inEvent) {
		var selectedIndex = inEvent.index;
		AssessmentUI_Data.payload_Devices.payloadChecked[selectedIndex] = !AssessmentUI_Data.payload_Devices.payloadChecked[selectedIndex];
	
	},
	
	resetCountryData: function() {
		this.countryNameList = [];
	},
	
	resetCityData: function() {
		this.$.cityPickerList.setStyle("height:0px");
		this.cityNameList = [];
		this.$.cityPicker.setContent("Choose City");
		this.$.cityPickerList.count = 0;

		AssessmentUI_Data.selected_CityName = null;
	},
	
	resetCustomerData: function() {
		this.$.customerPickerList.setStyle("height:0px");
		this.customerNameList = [];
		this.customerValueList = [];
		this.$.customerPicker.setContent("Choose Customer");
		this.$.customerPickerList.count = 0;
		
		AssessmentUI_Data.payload_Customers = null;
		AssessmentUI_Data.selected_CustomerOrgSiteKey = null;
	},
	
	resetDeciveData: function() {
		AssessmentUI_Data.payload_Devices = null;
	},
});